<template>
    <div>
        <h1>Http请求工具</h1>

        <div>只做GET和POST的http请求工具，追求轻量方便快捷，全局使用</div>
        <h3>配置</h3>
        <dCode :code="conf.str1" />
        <h3>基础使用</h3>
        <div>支持then方式，不推荐使用</div>
        <div>传入的参数固定使用对象进行传输:比如get请求传入一个id和post传入一个id如下：</div>
        <dCode :code="conf.str2" />
        <h3>单独创建对象进行管理？</h3>
        <div>使用httpBean ,可用方法和全局一致，可以独立配置，适用于多个不同接口域名的情况</div>
        <dCode :code="conf.str3" />
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

const conf = reactive({
    str1: `http.setConfig({
    base: 'http://test.com',
    timeout: 60000,
    before: (config) => {
        config.headers['X-Auth-Token'] = '123456'
        if (typeof config.data.stop === 'function') config.data.stop(config.stop)
    },
    after: (xhr, config) => {
        const code = xhr.data.code + ''
        if (code !== '200') {
            xhr.status = xhr.data.code
            return
        }
    },
    error: (status, config) => {}
})`,
str2:`const data1 = await http.get('/get',{id:123})
const data2 = await http.post('/post',{id:1})`,
str3:`
const http1 = httpBean()
const data1 = await http1.get('/get',{id:123})
const data2 = await http1.post('/post',{id:1})`
})


</script>
<style lang="less" scoped></style>
